<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站发布页（带搜索选择功能）</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4F46E5;
      --secondary: #EC4899;
      --accent: #F59E0B;
      --success: #10B981;
      --danger: #EF4444;
      --dark: #1F2937;
      --light: #F9FAFB;
      --white: #FFFFFF;
      --gray: #6B7280;
      --light-gray: #E5E7EB;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      
      /* 主题颜色 */
      --theme1: #4F46E5;
      --theme2: #EC4899;
      --theme3: #0EA5E9;
      --theme4: #10B981;
      --theme5: #F59E0B;
      --theme6: #1F2937;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f0f2f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }
    
    /* 发布页面容器 */
    .post-page {
      display: none;
      min-height: 100vh;
      flex-direction: column;
    }
    
    .post-page.active {
      display: flex;
      animation: fadeIn 0.3s ease;
    }
    
    /* 导航栏 */
    .navbar {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--light-gray);
      background-color: var(--white);
      z-index: 10;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .nav-btn {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
    }
    
    .cancel-btn {
      color: var(--gray);
    }
    
    .post-btn {
      background-color: var(--primary);
      color: white;
      transition: background-color 0.2s;
    }
    
    .post-btn:hover {
      opacity: 0.9;
    }
    
    /* 内容区域 */
    .content {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    
    /* 表单样式 */
    .post-form {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .user-info {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .user-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    
    .user-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .post-input {
      width: 100%;
      min-height: 120px;
      border: none;
      outline: none;
      resize: none;
      font-size: 16px;
      padding: 0;
      background-color: transparent;
    }
    
    /* 功能按钮区 */
    .action-buttons {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-top: 1px solid var(--light-gray);
      border-bottom: 1px solid var(--light-gray);
    }
    
    .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      color: var(--gray);
      font-size: 12px;
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      transition: background-color 0.2s;
    }
    
    .action-btn:hover {
      background-color: var(--light);
    }
    
    .action-btn i {
      font-size: 20px;
      color: var(--primary);
    }
    
    /* 图片预览 */
    .image-preview {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 8px 0;
    }
    
    .preview-item {
      width: 100px;
      height: 100px;
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      flex-shrink: 0;
    }
    
    .preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .remove-img {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: var(--danger);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
    }
    
    /* 选择区域样式 */
    .select-section {
      margin-top: 16px;
    }
    
    .section-label {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .select-btn {
      color: var(--primary);
      font-size: 13px;
      cursor: pointer;
    }
    
    /* 已选项目展示 */
    .selected-items {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }
    
    .selected-item {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      background-color: rgba(79, 70, 229, 0.1);
      color: var(--primary);
      border-radius: 20px;
      font-size: 13px;
    }
    
    .selected-item .remove-item {
      cursor: pointer;
      font-size: 14px;
    }
    
    /* 链接区域 */
    .link-input-group {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-top: 8px;
    }
    
    .link-input {
      flex: 1;
      padding: 10px 12px;
      border: 1px solid var(--light-gray);
      border-radius: 8px;
      font-size: 14px;
      outline: none;
    }
    
    .link-input:focus {
      border-color: var(--primary);
    }
    
    .added-link {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px;
      background-color: var(--light);
      border-radius: 8px;
      margin-top: 10px;
    }
    
    .link-favicon {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      background-color: var(--gray);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    
    .link-info {
      flex: 1;
      overflow: hidden;
    }
    
    .link-title {
      font-size: 14px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .link-url {
      font-size: 12px;
      color: var(--gray);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .remove-link {
      color: var(--gray);
      cursor: pointer;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--light-gray);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #f3f4f6;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 弹窗样式 */
    .modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: flex-end;
      z-index: 100;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    .modal-container {
      background-color: white;
      width: 100%;
      max-width: 420px;
      margin: 0 auto;
      border-radius: 16px 16px 0 0;
      padding: 16px;
      max-height: 80vh;
      overflow-y: auto;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    
    .modal-overlay.active .modal-container {
      transform: translateY(0);
    }
    
    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .modal-title {
      font-size: 18px;
      font-weight: 600;
    }
    
    .close-modal {
      font-size: 20px;
      cursor: pointer;
      color: var(--gray);
    }
    
    .search-box {
      position: relative;
      margin-bottom: 16px;
    }
    
    .search-input {
      width: 100%;
      padding: 12px 16px 12px 40px;
      border-radius: 8px;
      border: 1px solid var(--light-gray);
      font-size: 14px;
      outline: none;
    }
    
    .search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--gray);
    }
    
    .items-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    
    .list-item {
      padding: 12px 16px;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.2s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .list-item:hover {
      background-color: var(--light);
    }
    
    .list-item.selected {
      background-color: rgba(79, 70, 229, 0.1);
      color: var(--primary);
    }
    
    .list-item i {
      font-size: 16px;
      opacity: 0.7;
    }
    
    /* 主题样式 */
    .theme1 { --primary: var(--theme1); }
    .theme2 { --primary: var(--theme2); }
    .theme3 { --primary: var(--theme3); }
    .theme4 { --primary: var(--theme4); }
    .theme5 { --primary: var(--theme5); }
    .theme6 { 
      --primary: var(--theme6);
      --dark: white;
      --light: #111827;
      --light-gray: #374151;
      --white: #1F2937;
    }
    
    .theme6 .navbar,
    .theme6 .modal-container {
      background-color: var(--theme6);
      border-color: #374151;
    }
    
    .theme6 .post-input,
    .theme6 .nav-title,
    .theme6 .cancel-btn,
    .theme6 .section-label,
    .theme6 .switcher-header,
    .theme6 .switcher-option,
    .theme6 .modal-title,
    .theme6 .link-title {
      color: white;
    }
    
    .theme6 .action-btn,
    .theme6 .link-url {
      color: #d1d5db;
    }
    
    .theme6 .link-input,
    .theme6 .search-input,
    .theme6 .added-link {
      background-color: #374151;
      border-color: #4B5563;
      color: white;
    }
    
    .theme6 .selected-item {
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
    }
    
    .theme6 .list-item.selected {
      background-color: rgba(255, 255, 255, 0.1);
      color: white;
    }
    
    /* 动画 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 响应式 */
    @media (max-width: 360px) {
      .action-btn span {
        font-size: 11px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">发布页样式</div>
    <div class="switcher-option active" data-style="1">简约社交风</div>
    <div class="switcher-option" data-style="2">活力社交风</div>
    <div class="switcher-option" data-style="3">资讯社交风</div>
    <div class="switcher-option" data-style="4">社区社交风</div>
    <div class="switcher-option" data-style="5">生活分享风</div>
    <div class="switcher-option" data-style="6">深色主题风</div>
  </div>
  
  <div class="container">
    <!-- 1. 简约社交风 -->
    <div class="post-page active theme1" id="style1">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发布动态</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/64/200" alt="用户头像">
            </div>
            <div class="post-input" placeholder="分享你的想法..."></div>
          </div>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/29/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-image"></i>
              <span>图片</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-video-camera"></i>
              <span>视频</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-smile-o"></i>
              <span>表情</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-map-marker"></i>
              <span>位置</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-at"></i>
              <span>提及</span>
            </div>
          </div>
          
          <!-- 话题选择区 -->
          <div class="select-section" data-type="topic">
            <div class="section-label">
              <span>话题</span>
              <span class="select-btn">选择</span>
            </div>
            <div class="selected-items topic-items"></div>
          </div>
          
          <!-- 标签选择区 -->
          <div class="select-section" data-type="tag">
            <div class="section-label">
              <span>标签</span>
              <span class="select-btn">添加</span>
            </div>
            <div class="selected-items tag-items"></div>
          </div>
          
          <!-- 链接区域 -->
          <div class="select-section">
            <div class="section-label">
              <span>链接</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="粘贴链接地址...">
              <div class="add-link-btn">
                <i class="fa fa-link"></i>
              </div>
            </div>
            <div class="added-links"></div>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 2. 活力社交风 -->
    <div class="post-page theme2" id="style2">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发布动态</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/91/200" alt="用户头像">
            </div>
            <div class="post-input" placeholder="分享你的精彩瞬间..."></div>
          </div>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/1082/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
            <div class="preview-item">
              <img src="https://picsum.photos/id/1083/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-camera"></i>
              <span>拍照</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-music"></i>
              <span>音乐</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-smile-o"></i>
              <span>表情</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-map-marker"></i>
              <span>地点</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-user-plus"></i>
              <span>好友</span>
            </div>
          </div>
          
          <div class="select-section" data-type="topic">
            <div class="section-label">
              <span>热门话题</span>
              <span class="select-btn">选择</span>
            </div>
            <div class="selected-items topic-items"></div>
          </div>
          
          <div class="select-section" data-type="tag">
            <div class="section-label">
              <span>流行标签</span>
              <span class="select-btn">添加</span>
            </div>
            <div class="selected-items tag-items"></div>
          </div>
          
          <div class="select-section">
            <div class="section-label">
              <span>音乐链接</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="输入歌曲链接...">
              <div class="add-link-btn">
                <i class="fa fa-plus"></i>
              </div>
            </div>
            <div class="added-links"></div>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 3. 资讯社交风 -->
    <div class="post-page theme3" id="style3">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发布资讯</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/177/200" alt="用户头像">
            </div>
            <div class="post-input" placeholder="发布最新资讯、观点或分析..."></div>
          </div>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/1/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-image"></i>
              <span>配图</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-file-text-o"></i>
              <span>文档</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-bar-chart"></i>
              <span>数据</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-quote-right"></i>
              <span>引用</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-link"></i>
              <span>来源</span>
            </div>
          </div>
          
          <div class="select-section" data-type="topic">
            <div class="section-label">
              <span>资讯分类</span>
              <span class="select-btn">选择</span>
            </div>
            <div class="selected-items topic-items"></div>
          </div>
          
          <div class="select-section" data-type="tag">
            <div class="section-label">
              <span>关键词</span>
              <span class="select-btn">添加</span>
            </div>
            <div class="selected-items tag-items"></div>
          </div>
          
          <div class="select-section">
            <div class="section-label">
              <span>参考来源</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="输入参考资料链接...">
              <div class="add-link-btn">
                <i class="fa fa-check"></i>
              </div>
            </div>
            <div class="added-links"></div>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 4. 社区社交风 -->
    <div class="post-page theme4" id="style4">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发布帖子</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/237/200" alt="用户头像">
            </div>
            <div class="post-input" placeholder="分享你的经验、问题或想法..."></div>
          </div>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/0/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-image"></i>
              <span>图片</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-code"></i>
              <span>代码</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-file-o"></i>
              <span>附件</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-poll"></i>
              <span>投票</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-question-circle"></i>
              <span>提问</span>
            </div>
          </div>
          
          <div class="select-section" data-type="topic">
            <div class="section-label">
              <span>社区板块</span>
              <span class="select-btn">选择</span>
            </div>
            <div class="selected-items topic-items"></div>
          </div>
          
          <div class="select-section" data-type="tag">
            <div class="section-label">
              <span>技术标签</span>
              <span class="select-btn">添加</span>
            </div>
            <div class="selected-items tag-items"></div>
          </div>
          
          <div class="select-section">
            <div class="section-label">
              <span>资源链接</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="输入教程或资源链接...">
              <div class="add-link-btn">
                <i class="fa fa-plus"></i>
              </div>
            </div>
            <div class="added-links"></div>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 5. 生活分享风 -->
    <div class="post-page theme5" id="style5">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">分享生活</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/334/200" alt="用户头像">
            </div>
            <div class="post-input" placeholder="分享你的生活瞬间和感受..."></div>
          </div>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/1015/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
            <div class="preview-item">
              <img src="https://picsum.photos/id/1016/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-camera"></i>
              <span>相册</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-map-marker"></i>
              <span>地点</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-calendar"></i>
              <span>日期</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-smile-o"></i>
              <span>心情</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-user-o"></i>
              <span>同行</span>
            </div>
          </div>
          
          <div class="select-section" data-type="topic">
            <div class="section-label">
              <span>生活分类</span>
              <span class="select-btn">选择</span>
            </div>
            <div class="selected-items topic-items"></div>
          </div>
          
          <div class="select-section" data-type="tag">
            <div class="section-label">
              <span>体验标签</span>
              <span class="select-btn">添加</span>
            </div>
            <div class="selected-items tag-items"></div>
          </div>
          
          <div class="select-section">
            <div class="section-label">
              <span>相关地点</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="输入景点或地址链接...">
              <div class="add-link-btn">
                <i class="fa fa-map-marker"></i>
              </div>
            </div>
            <div class="added-links"></div>
          </div>
        </form>
      </div>
    </div>
    
    <!-- 6. 深色主题风 -->
    <div class="post-page theme6" id="style6">
      <div class="navbar">
        <div class="nav-btn cancel-btn">取消</div>
        <div class="nav-title">发布内容</div>
        <div class="nav-btn post-btn">发布</div>
      </div>
      
      <div class="content">
        <form class="post-form">
          <div class="user-info">
            <div class="user-avatar">
              <img src="https://picsum.photos/id/433/200" alt="用户头像">
            </div>
            <div class="post-input" placeholder="分享你的观影感受或推荐..."></div>
          </div>
          
          <div class="image-preview">
            <div class="preview-item">
              <img src="https://picsum.photos/id/1050/200" alt="预览图片">
              <div class="remove-img">
                <i class="fa fa-times"></i>
              </div>
            </div>
          </div>
          
          <div class="action-buttons">
            <div class="action-btn">
              <i class="fa fa-image"></i>
              <span>图片</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-film"></i>
              <span>预告片</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-star-o"></i>
              <span>评分</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-comment-o"></i>
              <span>短评</span>
            </div>
            <div class="action-btn">
              <i class="fa fa-ticket"></i>
              <span>购票</span>
            </div>
          </div>
          
          <div class="select-section" data-type="topic">
            <div class="section-label">
              <span>内容分类</span>
              <span class="select-btn">选择</span>
            </div>
            <div class="selected-items topic-items"></div>
          </div>
          
          <div class="select-section" data-type="tag">
            <div class="section-label">
              <span>内容标签</span>
              <span class="select-btn">添加</span>
            </div>
            <div class="selected-items tag-items"></div>
          </div>
          
          <div class="select-section">
            <div class="section-label">
              <span>相关链接</span>
            </div>
            <div class="link-input-group">
              <input type="text" class="link-input" placeholder="输入电影链接或影评...">
              <div class="add-link-btn">
                <i class="fa fa-link"></i>
              </div>
            </div>
            <div class="added-links"></div>
          </div>
        </form>
      </div>
    </div>
  </div>
  
  <!-- 选择弹窗 -->
  <div class="modal-overlay" id="selectModal">
    <div class="modal-container">
      <div class="modal-header">
        <div class="modal-title" id="modalTitle">选择话题</div>
        <div class="close-modal">
          <i class="fa fa-times"></i>
        </div>
      </div>
      
      <div class="search-box">
        <i class="fa fa-search search-icon"></i>
        <input type="text" class="search-input" placeholder="搜索...">
      </div>
      
      <div class="items-list" id="itemsList"></div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 数据
    const topicsData = {
      style1: [
        { id: 1, name: '日常分享', icon: 'fa-hashtag' },
        { id: 2, name: '美食', icon: 'fa-cutlery' },
        { id: 3, name: '旅行', icon: 'fa-plane' },
        { id: 4, name: '音乐', icon: 'fa-music' },
        { id: 5, name: '电影', icon: 'fa-film' },
        { id: 6, name: '运动', icon: 'fa-futbol-o' },
        { id: 7, name: '读书', icon: 'fa-book' },
        { id: 8, name: '科技', icon: 'fa-microchip' },
        { id: 9, name: '游戏', icon: 'fa-gamepad' },
        { id: 10, name: '摄影', icon: 'fa-camera' }
      ],
      style2: [
        { id: 11, name: '演唱会现场', icon: 'fa-music' },
        { id: 12, name: '夏日派对', icon: 'fa-glass' },
        { id: 13, name: '音乐节', icon: 'fa-headphones' },
        { id: 14, name: '新片上映', icon: 'fa-film' },
        { id: 15, name: '游戏攻略', icon: 'fa-gamepad' },
        { id: 16, name: '潮流时尚', icon: 'fa-shopping-bag' },
        { id: 17, name: '网红打卡', icon: 'fa-map-marker' }
      ],
      // 其他风格的话题数据...
      default: [
        { id: 101, name: '精选推荐', icon: 'fa-star' },
        { id: 102, name: '热门讨论', icon: 'fa-fire' },
        { id: 103, name: '最新动态', icon: 'fa-clock-o' }
      ]
    };
    
    const tagsData = {
      style1: [
        { id: 101, name: '周末' },
        { id: 102, name: '快乐' },
        { id: 103, name: '生活' },
        { id: 104, name: '心情' },
        { id: 105, name: '阳光' },
        { id: 106, name: '朋友' },
        { id: 107, name: '工作' },
        { id: 108, name: '学习' }
      ],
      style2: [
        { id: 111, name: '超燃' },
        { id: 112, name: '现场' },
        { id: 113, name: '开心' },
        { id: 114, name: '音乐' },
        { id: 115, name: '狂欢' },
        { id: 116, name: '青春' }
      ],
      // 其他风格的标签数据...
      default: [
        { id: 201, name: '热门' },
        { id: 202, name: '推荐' },
        { id: 203, name: '新品' },
        { id: 204, name: '限时' }
      ]
    };
    
    // 当前状态
    let currentStyle = '1';
    let currentSelectType = ''; // 'topic' 或 'tag'
    let selectedItems = {
      topic: {},
      tag: {}
    };
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const postPages = {
      '1': document.getElementById('style1'),
      '2': document.getElementById('style2'),
      '3': document.getElementById('style3'),
      '4': document.getElementById('style4'),
      '5': document.getElementById('style5'),
      '6': document.getElementById('style6')
    };
    const selectModal = document.getElementById('selectModal');
    const modalTitle = document.getElementById('modalTitle');
    const itemsList = document.getElementById('itemsList');
    const searchInput = document.querySelector('.search-input');
    const closeModal = document.querySelector('.close-modal');
    
    // 初始化
    function init() {
      // 为所有选择按钮添加事件
      document.querySelectorAll('.select-btn').forEach(btn => {
        btn.addEventListener('click', function() {
          const section = this.closest('.select-section');
          currentSelectType = section.getAttribute('data-type');
          
          // 显示弹窗
          showSelectModal();
        });
      });
      
      // 关闭弹窗事件
      closeModal.addEventListener('click', hideSelectModal);
      selectModal.addEventListener('click', function(e) {
        if (e.target === selectModal) {
          hideSelectModal();
        }
      });
      
      // 搜索事件
      searchInput.addEventListener('input', filterItems);
      
      // 样式切换事件
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = this.getAttribute('data-style');
          switchStyle(style);
        });
      });
      
      // 其他交互事件
      initOtherEvents();
    }
    
    // 切换样式
    function switchStyle(style) {
      // 隐藏所有页面
      Object.values(postPages).forEach(page => {
        page.classList.remove('active');
      });
      
      // 显示选中的样式
      if (postPages[style]) {
        postPages[style].classList.add('active');
        currentStyle = style;
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 显示选择弹窗
    function showSelectModal() {
      // 设置弹窗标题
      modalTitle.textContent = currentSelectType === 'topic' ? '选择话题' : '添加标签';
      
      // 加载项目列表
      loadItemsList();
      
      // 显示弹窗
      selectModal.classList.add('active');
      searchInput.value = '';
      searchInput.focus();
    }
    
    // 隐藏选择弹窗
    function hideSelectModal() {
      selectModal.classList.remove('active');
    }
    
    // 加载项目列表
    function loadItemsList() {
      let items = [];
      
      // 根据当前样式和选择类型获取数据
      if (currentSelectType === 'topic') {
        items = topicsData[currentStyle] || topicsData.default;
      } else {
        items = tagsData[currentStyle] || tagsData.default;
      }
      
      // 清空列表
      itemsList.innerHTML = '';
      
      // 添加项目
      items.forEach(item => {
        const listItem = document.createElement('div');
        listItem.className = `list-item ${selectedItems[currentSelectType][item.id] ? 'selected' : ''}`;
        listItem.setAttribute('data-id', item.id);
        listItem.setAttribute('data-name', item.name);
        
        listItem.innerHTML = currentSelectType === 'topic' 
          ? `<i class="fa ${item.icon}"></i><span>${item.name}</span>`
          : `<i class="fa fa-tag"></i><span>${item.name}</span>`;
        
        // 添加点击事件
        listItem.addEventListener('click', function() {
          this.classList.toggle('selected');
          const id = parseInt(this.getAttribute('data-id'));
          const name = this.getAttribute('data-name');
          
          // 更新选中状态
          if (this.classList.contains('selected')) {
            // 话题单选，标签多选
            if (currentSelectType === 'topic') {
              // 清除其他选中项
              Object.keys(selectedItems.topic).forEach(key => {
                selectedItems.topic[key] = false;
              });
              document.querySelectorAll('.list-item').forEach(item => {
                item.classList.remove('selected');
              });
              this.classList.add('selected');
            }
            
            selectedItems[currentSelectType][id] = { name: name, icon: item.icon || 'fa-tag' };
          } else {
            delete selectedItems[currentSelectType][id];
          }
          
          // 更新显示
          updateSelectedItems();
        });
        
        itemsList.appendChild(listItem);
      });
    }
    
    // 过滤项目列表
    function filterItems() {
      const keyword = searchInput.value.toLowerCase();
      const items = document.querySelectorAll('.list-item');
      
      items.forEach(item => {
        const name = item.getAttribute('data-name').toLowerCase();
        if (name.includes(keyword)) {
          item.style.display = 'flex';
        } else {
          item.style.display = 'none';
        }
      });
    }
    
    // 更新已选项目显示
    function updateSelectedItems() {
      const activePage = document.querySelector(`.post-page.active`);
      const container = activePage.querySelector(`.${currentSelectType}-items`);
      
      // 清空容器
      container.innerHTML = '';
      
      // 添加已选项
      Object.values(selectedItems[currentSelectType]).forEach(item => {
        if (item) {
          const selectedItem = document.createElement('div');
          selectedItem.className = 'selected-item';
          selectedItem.setAttribute('data-name', item.name);
          
          selectedItem.innerHTML = `
            <i class="fa ${item.icon}"></i>
            <span>${currentSelectType === 'topic' ? '#' : '#'}${item.name}</span>
            <div class="remove-item">
              <i class="fa fa-times"></i>
            </div>
          `;
          
          // 添加删除事件
          selectedItem.querySelector('.remove-item').addEventListener('click', function() {
            // 从选中项中移除
            Object.keys(selectedItems[currentSelectType]).forEach(key => {
              if (selectedItems[currentSelectType][key] && 
                  selectedItems[currentSelectType][key].name === item.name) {
                delete selectedItems[currentSelectType][key];
              }
            });
            
            // 从DOM中移除
            selectedItem.remove();
            
            // 更新弹窗中的选中状态
            const listItems = document.querySelectorAll('.list-item');
            listItems.forEach(listItem => {
              if (listItem.getAttribute('data-name') === item.name) {
                listItem.classList.remove('selected');
              }
            });
          });
          
          container.appendChild(selectedItem);
        }
      });
    }
    
    // 初始化其他交互事件
    function initOtherEvents() {
      // 移除图片
      document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-img')) {
          e.target.closest('.preview-item').remove();
        }
      });
      
      // 添加链接
      document.addEventListener('click', function(e) {
        if (e.target.closest('.add-link-btn')) {
          const btn = e.target.closest('.add-link-btn');
          const input = btn.closest('.link-input-group').querySelector('.link-input');
          const url = input.value.trim();
          
          if (url) {
            // 提取链接信息
            let title = "链接内容";
            try {
              const linkUrl = new URL(url);
              title = linkUrl.hostname.replace('www.', '');
            } catch (e) {
              title = "外部链接";
            }
            
            // 创建链接元素
            const linkElement = document.createElement('div');
            linkElement.className = 'added-link';
            linkElement.innerHTML = `
              <div class="link-favicon">
                <i class="fa fa-globe"></i>
              </div>
              <div class="link-info">
                <div class="link-title">${title}</div>
                <div class="link-url">${url}</div>
              </div>
              <div class="remove-link">
                <i class="fa fa-times"></i>
              </div>
            `;
            
            // 添加到容器
            const container = btn.closest('.select-section').querySelector('.added-links');
            container.appendChild(linkElement);
            
            // 清空输入
            input.value = '';
          }
        }
      });
      
      // 移除链接
      document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-link')) {
          e.target.closest('.added-link').remove();
        }
      });
      
      // 发布按钮
      document.addEventListener('click', function(e) {
        if (e.target.closest('.post-btn')) {
          const activePage = document.querySelector('.post-page.active');
          const content = activePage.querySelector('.post-input').textContent.trim();
          
          if (content) {
            alert('发布成功！');
          } else {
            alert('请输入内容后再发布');
          }
        }
      });
      
      // 取消按钮
      document.addEventListener('click', function(e) {
        if (e.target.closest('.cancel-btn')) {
          if (confirm('确定要取消发布吗？已输入的内容将会丢失。')) {
            const activePage = document.querySelector('.post-page.active');
            activePage.querySelector('.post-input').textContent = '';
          }
        }
      });
    }
    
    // 启动
    init();
  </script>
</body>
</html>